<template>
  <!-- html 结构 -->
  <div class="count">
    <h2>当前计数为：{{ count }}，放大后：{{ bigCount }}</h2>
    <h2>组件tag：{{ tag }}</h2>
    <!-- 或者value前不加冒号，v-model改为v-model.number -->
    <select v-model.number="num">
      <!-- 如果value前不加冒号，选择的数字会变成字符串 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script lang="ts" setup name="">
import { ref } from "vue";
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";

const countStore = useCountStore();
// 被reactive对象包裹的ref不需要再 ‘.value’
// console.log(">>>", countStore.count);

// 使用storeToRefs解构只会关注store中的数据
const { count, tag, bigCount } = storeToRefs(countStore);

// let count = ref(1);
let num = ref(1);

function add() {
  // count.value += num.value;
  // 第一种修改方式
  // countStore.count += num.value;

  // 第二种修改方式，patch
  // countStore.$patch({
  //   count: (countStore.count += num.value),
  //   tag: (countStore.tag += "."),
  // });

  // 第三种修改方式，actions，需要count.ts中配置actions
  countStore.incr(num.value);
}

function sub() {
  // count.value -= num.value;
  countStore.count -= num.value;
}
</script>

<style scoped>
/* 样式 */
.count {
  background-color: antiquewhite;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select,
button {
  margin: 0 10px;
  height: 25px;
}
</style>
